<template>
  <a-modal
    centered
    v-model="visible"
    :width="modalWidth"
    :bodyStyle="{height:'850px',padding:'0'}"
    :destroyOnClose="true"
    :maskClosable=true
    :title="title"
    :footer="null">

      <div style="margin: 10px;display: flex;flex-flow: row nowrap;justify-content: space-between">
          <div style="display:flex">
              <div style="padding: 10px" @click="handleCodeFullScreen"><a-button>切换大小</a-button></div>
              <div style="padding: 10px" ><a-button type="primary" @click="fnDebugCode">调试代码</a-button></div>
          </div>
          <div>
              <div style="padding: 10px" > <a-button style="background-color: red;color: white" @click="fnSave">暂存</a-button></div>
          </div>
      </div>

     <codemirror ref="myCode"
                 :value="codeValue"
                 :options="options"
                 @change="fnCodeChange"
                 class="code">
     </codemirror>

      <debug-modal ref="debugModal" v-if="isDebug"/>
  </a-modal>

</template>

<script>
import { codemirror } from 'vue-codemirror-lite'

import debugModal from "../modules/template/part/DebugModal";

// 核心样式
import 'codemirror/lib/codemirror.css'
// 引入主题后还需要在 options 中指定主题才会生效
import 'codemirror/theme/cobalt.css'

// 需要引入具体的语法高亮库才会有对应的语法高亮效果
// codemirror 官方其实支持通过 /addon/mode/loadmode.js 和 /mode/meta.js 来实现动态加载对应语法高亮库
// 但 vue 貌似没有无法在实例初始化后再动态加载对应 JS ，所以此处才把对应的 JS 提前引入
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/mode/vue/vue.js'
import 'codemirror/mode/velocity/velocity.js'

import 'codemirror/addon/hint/show-hint.js'
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/hint/javascript-hint.js'

import 'codemirror/mode/css/css.js'
import 'codemirror/mode/xml/xml.js'
import 'codemirror/mode/clike/clike.js'
import 'codemirror/mode/markdown/markdown.js'
import 'codemirror/mode/python/python.js'
import 'codemirror/mode/r/r.js'
import 'codemirror/mode/shell/shell.js'
import 'codemirror/mode/sql/sql.js'
import 'codemirror/mode/swift/swift.js'

export default {
  components: { codemirror, debugModal },
  data () {
    return {
      title: '代码编辑',
      modalWidth: 1200,
      visible: false,
      codeValue: '',
      isDebug: false,
      record: {},
      // 配置
      options: {
        // 缩进格式
        tabSize: 2,
        // 主题，对应主题库 JS 需要提前引入
        theme: 'cobalt',
        // 显示行号
        lineNumbers: true,
        line: true,
        mode: 'velocity',
        extraKeys: {
          'Ctrl-/': 'autocomplete'
        }
      }
    }
  },
  // model: {
  //   prop: 'codeValue',
  //   event: 'change'
  // },
  mounted () {
  },
  methods: {
    editCode(text, record) {
      this.codeValue = text
      this.record = record
      this.visible = true
    },
    fnDebugCode() {
      this.isDebug = true
      this.$nextTick(() => {
        this.$refs.debugModal.visible = true
        this.$nextTick(() => {
          this.$refs.debugModal.code = this.codeValue
        })
      })
    },
    fnClose() {
      this.isDebug = false
      let that = this
      this.$confirm({
        content: '确定取消编辑？',
        onOk() {
          that.visible = false
        },
        cancelText: '取消',
        onCancel() {
        }
      });
    },
    handleCodeFullScreen() {
      if (this.modalWidth == 1200) {
        this.modalWidth = window.innerWidth
      } else {
        this.modalWidth = 1200
      }
    },
    fnCodeChange(val) {
      this.codeValue = val
    },
    fnSave() {
      this.$emit('change', this.codeValue, this.record)
      this.$message.success('成功!')
      this.visible = false
    }
  }
}
</script>

<style lang="less">
    .CodeMirror{
        height: 800px;
    }
</style>
